<template>
	<!-- 初级认证 -->
	<view class="authentication-primary">
		<nav-bar :title="i18n.auth.primaryAuth" @_back="_back" />
		<view class="container">
			<view class="nationality dis-between" @click="nationalityClick">
				<view>
					<image class="image" src="../../static/images/login/nationality.png" mode="widthFix"></image>
				</view>
				<view class="center-box" :class="info.country? 'white-text': 'default-text'">
					<text>{{info.country || i18n.auth.enterNationality}}</text>
				</view>
				<u-icon name="arrow-down" color="rgba(255, 255, 255, .4)" size="12"></u-icon>
			</view>
			<custom-input v-model="info.name" icon="user" :placehold="i18n.auth.enterName"></custom-input>
			<custom-input v-model="info.card_id" icon="id" :placehold="i18n.auth.enterID"></custom-input>
			<custom-input v-model="info.position" icon="address" :placehold="i18n.auth.enterAddress"></custom-input>
			<custom-submit :loading="loading" @click="submit" :title="i18n.common.confirm"></custom-submit>
		</view>
		<!-- 国籍选择 -->
		<select-currency ref="nationalityBox" :currentId="info.country_id" :list="countryList" @click="_click"></select-currency>
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import CustomInput from '@/components/CustomInput/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import {
		userReal_name,
		userHighreal_info,
		get_country
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			CustomInput,
			CustomSubmit,
			SelectCurrency
		},
		computed: {
			...mapGetters(['token', 'review_status', 'countryList']),
			i18n() {
				return this.$t('message');
			}
		},
		data() {
			return {
				info: {
					country: ''
				},
				loading: false
			}
		},
		async mounted() {
			if (!this.review_status) return;
			this.loadInfo();
		},
		methods: {
			nationalityClick() {
				this.$refs.nationalityBox.open();
			},
			_click(val) {
				this.info.country = val.name;
				this.info.country_id = val.id;
			},
			async submit() {
				if (!this.info.country) return Toast(this.i18n.auth.enterNationality);
				if (!this.info.name) return Toast(this.i18n.auth.enterName);
				if (!this.info.card_id) return Toast(this.i18n.auth.enterID);
				if (!this.info.position) return Toast(this.i18n.auth.enterAddress);
				this.loading = true;
				this.info.token = this.token;
				let {
					error,
					res
				} = await userReal_name(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.auth.success);
				this.loading = false;
				this.$store.dispatch('user/getInfo');
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			async loadInfo() {
				let { error, res} = await userHighreal_info({token: this.token});
				if (error) return;
				this.info = res;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authentication-primary {
		.nationality {
			height: 110rpx;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
			margin-top: 40rpx;

			.image {
				width: 32rpx;
				margin-right: 40rpx;
			}

			.center-box {
				width: calc(100% - 80rpx);
				font-size: 28rpx;

				&.default-text {
					color: rgba(255, 255, 255, .54);

				}
			}
		}
	}
</style>
